<template>
  <div class="container">
    <el-card>
      <el-row class="tops">
        <el-col :span="16">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="formInline.user" placeholder="请输入文章标题"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearList">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="8">
          <el-button
            type="success"
            icon="el-icon-edit"
            style="float:right"
            @click="addInterviewShow = true"
          >新增技巧</el-button>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert type="info" show-icon :closable="false" :title="`数据一共显示${total}条`"></el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="文章标题" width="280">
          <template slot-scope="scope">
            <div v-if="scope.row.videoURL">
              {{scope.row.title}}
              <i class="el-icon-film" @click="watchFilm(scope.row)"></i>
            </div>
            <div v-else>{{scope.row.title}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="180"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">{{scope.row.createTime | format}}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="preview(scope.row)">预览</el-button>
            <el-button type="text" v-if="scope.row.state===1" @click="disSwitchs(scope.row)">禁用</el-button>
            <el-button type="text" v-if="scope.row.state===0" @click="ableSwitchs(scope.row)">启用</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="editDialog(scope.row)"
            >修改</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="deleteArticle(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="query.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
    <!-- 新增对话框 -->
    <article-add
      :addInterviewShow="addInterviewShow"
      :ruleForm="ruleForm"
      @closeAddDialog="addInterviewShow=false"
      @getList="getTableData"
    ></article-add>
    <!-- <el-dialog
      class="addlog"
      title="新增文章"
      :visible.sync="addInterviewShow"
      width="60%"
      :before-close="addHandleClose"
      >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="ruleForm.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="ruleForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addInterviewShow = false">取 消</el-button>
        <el-button type="primary" @click="addArticle">确 定</el-button>
      </span>
    </el-dialog>-->
    <!-- 预览对话框 -->
    <article-preview
      :previewDialogVisible="previewDialogVisible"
      :previewData="previewData"
      @closeDialog="previewDialogVisible=false"
    ></article-preview>
    <!-- <el-dialog
      title="预览文章"
      :visible.sync="previewDialogVisible"
      width="50%"
      :before-close="previewClose"
      >
      <div class="preview-head">
        <h3>{{previewData.title}}</h3>
        <span>{{previewData.createTime | format}}</span>
        <span>{{previewData.username}}</span>
        <span>{{previewData.visits}}</span>
      </div>
      <div class="preview-body">
        <div v-html="previewData.articleBody"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="previewDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>-->

    <!-- 修改对话框 -->
    <el-dialog
      title="修改文章"
      :visible.sync="editInterviewShow"
      width="60%"
      :before-close="edithandleClose"
    >
      <el-form ref="form" label-width="80px">
        <el-form
          :model="editForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title" class="article-title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor v-model="editForm.articleBody"></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="editForm.videoURL" class="videostyle"></el-input>
          </el-form-item>
        </el-form>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editInterviewShow = false">取 消</el-button>
        <el-button type="primary" @click="sendEditInterview">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 视频预览 -->
    <el-dialog
      :visible.sync="videoDialogVisible"
      width="45%"
      :before-close="videoHandleClose"
      class="previewVideo"
    >
      <i class="el-icon-error" @click="videoDialogVisible=false"></i>
      <video
        v-if="videoDialogVisible"
        :src="videoData.videoURL"
        controls="controls"
        autoplay
        class="videoPlay"
      >您的浏览器不支持video标签</video>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="videoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="videoDialogVisible = false">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
// 获取文章请求
import { list } from '@/api/hmmm/articles'
import { add } from '@/api/hmmm/articles'
import { remove } from '@/api/hmmm/articles'
import { update } from '@/api/hmmm/articles'
import { changeState } from '@/api/hmmm/articles'
import { parseTime } from '@/filters/index'
import ArticlePreview from '@/module-hmmm/components/articles-preview'
import ArticleAdd from '@/module-hmmm/components/articles-add'
export default {
  data() {
    return {
      // 状态多选框

      value: '',
      // 表格数据
      tableData: [],
      // table表格请求参数
      query: {
        page: 1,
        pagesize: 10,
        keyword: '',
      },
      total: null,
      formInline: {
        user: '',
        region: null,
      },
      // 新增对话框显示
      addInterviewShow: false,
      // 编辑对话框显示隐藏
      editInterviewShow: false,
      // 新增form表单数据
      // form: {
      //   name: ''
      // },
      // 预览对话框显示与隐藏
      previewDialogVisible: false,
      // 预览对话框数据
      previewData: {},
      // 编辑对话框数据
      editDialogData: {},
      // 视频对话框显示与隐藏
      videoDialogVisible: false,
      videoData: {},
      // 新增form表单数据
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: '',
      },
      // 编辑对话框数据绑
      editForm: {
        title: '',
        articleBody: '',
        videoURL: '',
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
      },
    }
  },
  components: {
    ArticlePreview,
    ArticleAdd,
  },
  filters: {
    format(value) {
      return parseTime(value)
    },
  },
  created() {
    this.getTableData()
  },
  methods: {
    // 获取表格数据的请求
    getTableData() {
      const { data } = list(this.query).then((data) => {
        this.tableData = data.data.items
        this.total = data.data.counts
        // console.log(this.tableData)
      })
    },
    // 分页选择框数据最新pagesize
    handleSizeChange(val) {
      this.query.pagesize = val
      this.getTableData(this.query)
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(val)
      this.query.page = val
      this.getTableData(this.query)
    },
    search() {
      if (this.formInline.region === '') {
        this.formInline.region = null
        return this.getTableData()
      }
      // console.log(this.formInline.user);
      // console.log(this.formInline.region);
      this.query.state = this.formInline.region
      this.query.keyword = this.formInline.user
      this.getTableData(this.query)
    },
    // 清除按钮
    clearList() {
      this.formInline.region = null
      this.formInline.user = ''
      this.search()
    },
    // 新增文章对话框关闭事件
    addHandleClose() {
      this.addInterviewShow = false
    },
    // 新增对话框确定发送请求添加
    async addArticle() {
      if (
        this.ruleForm.title == '' ||
        this.ruleForm.articleBody == '' ||
        this.ruleForm.videoURL == ''
      ) {
        this.$message('请输入数据')
        return
      }
      await add(this.ruleForm)
      this.getTableData()
      this.addInterviewShow = false
      this.ruleForm.title = ''
      this.ruleForm.articleBody = ''
      this.ruleForm.videoURL = ''
    },
    // 预览
    preview(val) {
      // console.log(val);
      this.previewData = val
      // console.log(this.previewData)

      this.previewDialogVisible = true
    },
    // 预览对话框关闭
    previewClose() {
      // console.log(1);
      this.previewDialogVisible = false
    },
    // 删除文章
    async deleteArticle(val) {
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult != 'confirm') {
        return this.$message.info('已取消删除')
      }
      await remove({
        detailId: val.id,
      })
      // 删除成功后的提示
      this.$message.success('删除成功')
      this.getTableData()
      this.addInterviewShow = false
    },
    // 启用切换为禁用
    async disSwitchs(val) {
      val.state = 0
      // console.log(val.state)
      await changeState({
        id: val.id,
        state: val.state,
      })
    },
    // 禁用切换为启用
    async ableSwitchs(val) {
      val.state = 1
      // console.log(val)
      await changeState({
        id: val.id,
        state: val.state,
      })
    },
    // 修改对话框
    editDialog(val) {
      this.editInterviewShow = true
      this.editDialogData = val
      this.editForm.title = val.title
      this.editForm.articleBody = val.articleBody
      this.editForm.videoURL = val.videoURL
    },
    edithandleClose() {
      this.editInterviewShow = false
    },
    // 修改发送请求
    async sendEditInterview() {
      this.editInterviewShow = false
      await update({
        id: this.editDialogData.id,
        title: this.editForm.title,
        articleBody: this.editForm.articleBody,
        videoURL: this.editForm.videoURL,
      })
      // 修改成功后的提示
      this.$message.success('修改成功')
      this.getTableData()
    },
    // 视频对话框关闭事件
    videoHandleClose() {},
    // 视频对话框
    watchFilm(val) {
      this.videoDialogVisible = true
      this.videoData = val
    },
  },
}
</script>

<style scoped lang="less">
.el-input {
  width: 200px;
}
.el-option {
  margin-right: 5px;
}
.el-select {
  margin-right: 10px;
}
.tops {
  margin-bottom: 10px;
}
.el-alert--info {
  margin-bottom: 8px;
}
.el-pagination {
  float: right;
  margin-top: 8px;
}
.ql-align-center img {
  width: 600px !important;
}
.ql-editor {
  min-height: 280px;
}
.el-table__row i {
  color: blue;
}
.el-icon-error {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translate(-100%, -60%);

  font-size: 50px;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.previewVideo .el-dialog {
  transform: translateY(60px);
}
/deep/.previewVideo .el-dialog__header {
  background-color: #fff;
  padding: 0;
  height: 0;
}
/deep/.previewVideo .el-dialog__body {
  position: relative;
  padding: 0;
}
.previewVideo .el-dialog__footer {
  display: none !important;
}
.previewVideo .el-dialog__headerbtn {
  display: none;
}
.el-pagination {
  margin-bottom: 15px;
}
.el-icon-film {
  cursor: pointer;
}
.article-title .el-input  {
  width: 770px !important;
}
.videostyle .el-input__inner {
  width: 770px;
}
.el-input--suffix {
  width: 92%;
}
.videoPlay {
  width: 100%;
  height: 100%;
}
</style>